@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 260 40% 98%;
    --foreground: 260 10% 10%;

    --card: 0 0% 100%;
    --card-foreground: 260 10% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 260 10% 10%;

    --primary: 260 70% 75%;
    --primary-foreground: 0 0% 100%;

    --secondary: 260 20% 96%;
    --secondary-foreground: 260 30% 30%;

    --muted: 260 20% 96%;
    --muted-foreground: 260 10% 50%;

    --accent: 260 70% 95%;
    --accent-foreground: 260 30% 30%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 260 20% 90%;
    --input: 260 20% 90%;
    --ring: 260 70% 75%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    --sock-purple: #9b87f5;
    --sock-dark-purple: #7c3aed;
    --sock-soft-blue: #D3E4FD;
    --sock-soft-green: #F2FCE2;
    --sock-soft-orange: #FDE1D3;
    --sock-soft-purple: #E5DEFF;
  }

  .dark {
    --background: 260 20% 10%;
    --foreground: 260 10% 98%;

    --card: 260 20% 12%;
    --card-foreground: 260 10% 98%;

    --popover: 260 20% 12%;
    --popover-foreground: 260 10% 98%;

    --primary: 260 70% 75%;
    --primary-foreground: 260 10% 10%;

    --secondary: 260 20% 18%;
    --secondary-foreground: 260 10% 90%;

    --muted: 260 20% 18%;
    --muted-foreground: 260 10% 70%;

    --accent: 260 20% 25%;
    --accent-foreground: 260 10% 90%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 260 10% 98%;

    --border: 260 20% 25%;
    --input: 260 20% 25%;
    --ring: 260 70% 75%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Checkered background pattern for transparency */
.bg-checkered {
  background-image: 
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.sock-preview-container {
  position: relative;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.sock {
  position: relative;
  width: 160px;
  height: 320px;
  transition: all 0.3s ease;
}

.sock-crew {
  height: 320px;
}

.sock-no-show {
  height: 150px;
}

.sock-knee-high {
  height: 420px;
}

.sock-body {
  width: 100%;
  height: 100%;
  border-radius: 25px 25px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.sock-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

.sock-elastic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border-radius: 25px 25px 0 0;
  background-color: rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(0,0,0,0.1);
}

.sock-toe {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(255,255,255,0.2);
  border-top: 2px solid rgba(0,0,0,0.05);
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--border);
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.message {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-width: 80%;
  animation: fade-in 0.3s ease-out;
}

.user-message {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  align-self: flex-end;
  border-top-right-radius: 0;
  margin-left: auto;
}

.ai-message {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  align-self: flex-start;
  border-top-left-radius: 0;
}

.design-controls-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.trending-element {
  cursor: pointer;
  transition: all 0.2s ease;
}

.trending-element:hover {
  transform: translateY(-2px);
}

.sock-type-button {
  transition: all 0.2s ease;
}

.sock-type-button.active {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.text-sock-purple {
  color: var(--sock-purple);
}

.bg-sock-purple {
  background-color: var(--sock-purple);
}

.hover\:bg-sock-dark-purple:hover {
  background-color: var(--sock-dark-purple);
}

.border-sock-purple {
  border-color: var(--sock-purple);
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 设计样例悬浮效果 */
.design-example-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.design-example-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
